import React, { useState } from 'react';
function PassLogin() { 
    //受控表单
    const [user,setUser] = useState({username:"admin",password:"123",mobile:"135"})

    const userNameChange=(e)=>{

     
        setUser({...user,username:e.target.value});

    }

    const passChange=(e)=>{
      
        setUser({...user,password:e.target.value});

    }

    const changeHandle=(e,fld)=>{

        let _user={...user};
        _user[fld]=e.target.value;
        setUser(_user);

    }

    const submit = () => { 
        console.log("登录",user)
    }
    return (

        <>
           <div  className="login-body">

              {user.username}
              <div>
                {user.password}
              </div>

              <button onClick={()=>setUser({username:"张三",password:"123456"})}>修改</button>
             <div>账号:<input value={user.username} onChange={(e)=>userNameChange(e)} /></div> 

                <div>密码:<input value={user.password}  onChange={(e)=>changeHandle(e,'password')} /></div>
                <div>手机号:<input value={user.mobile}  onChange={(e)=>changeHandle(e,'mobile')} /></div>

                <div><button onClick={()=>submit()}>登录</button></div>
              </div>
        </>
    )
    
}

export default PassLogin;